<template>
	<view class="gal-padding"
	style="padding:30rpx;">
		<view>
			<text class="gal-block-text gal-h4 gal-color-gray">提交按钮动画</text>
		</view>
		<view class="gal-margin-top-large">
			<form @submit="submit">
				<view class="gal-margin-top">
					<text class="gal-text-small gal-color-gray">小字 Label</text>
				</view>
				<view style="margin-top:10rpx;">
					<textarea v-model="formData.name" name="name" placeholder="说点什么..." 
					class="gal-textarea gal-bg-gray gal-border-box" style="width:690rpx;" />
				</view>
				<view class="gal-flex gal-rows gal-nowrap gal-space-between gal-align-items-center" 
				style="margin-top:20rpx;">
					<view class="">
					</view>
					<view class="">
						<gal-submit-button ref="guibtn1">
							<text class="gal-block-text gal-sbutton-text gal-text-center gal-color-white" slot="default">提交</text>
							<button type="default" slot="realBtn" form-type="submit">提交</button>
							<text class="gal-block-text gal-sbutton-text gal-text-center gal-color-white gal-icons" slot="success">&#xe60f; 提交成功</text>
							<text class="gal-block-text gal-sbutton-text gal-text-center gal-color-white gal-icons" slot="error">&#xe646;提交失败</text>
						</gal-submit-button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			formData:{name:'GraceUI'}
		}
	},
	methods: {
		submit : function (e) {
			// 检查按钮状态 按钮状态不为 1 阻止重复提交
			var btnStatus = this.$refs.guibtn1.status;
			if(btnStatus != 1){return ;}
			this.$refs.guibtn1.loading();
			// 提交
			console.log(e);
			// 模拟 api 请求, 使用箭头函数保持 this
			setTimeout(()=>{
				
				this.$refs.guibtn1.success();
				// 其他逻辑 比如 弹出 toast 提示成功
				// 然后页面跳转
				uni.showToast({ title:"提交成功", icon:"none"});
				setTimeout(()=>{
					// 页面跳转代码
				}, 1500);
				
				// 提交失败演示
				/*
				this.$refs.guibtn1.fail();
				// 其他逻辑 比如 弹出 toast 提示失败
				// 然后页面跳转
				uni.showToast({ title:"提交失败", icon:"none"});
				setTimeout(()=>{
					// 重置按钮
					this.$refs.guibtn1.reset();
				}, 1500);
				*/
			}, 2000)
		}
	}
}
</script>
<style>

</style>
